<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="../../include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<%@include file="../../include/inhead.jsp"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>预付充值</title>

<link rel="stylesheet" type="text/css" href="${ctx }/static/tp/bootstrap/2.3.1/css_ding/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${ctx }/static/css/xc/autoinn/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="${ctx }/static/css/autoinn/xc/site.css" />
<link rel="stylesheet" type="text/css" href="${ctx }/static/tp/bootstrap/2.3.1/css_ding/bootstrap-datetimepicker.min.css" />

<style type="text/css">
body {
	background-color: #f0efed;
}

.container {
	padding-left: 0px;
	padding-right: 0px;
}

.row {
	margin-left: 0px;
	margin-right: 0px;
}

.list-group-item:first-child {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}

.list-group-item:last-child {
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}

.active a {
	color: #EF8A55;
}

a:hover {
	color: #919191;
	text-decoration: none;
}
</style>

<style type="text/css">
.list-group-item:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.list-group-item:last-child {
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}

.bg-price {
	transition: all 0.75s;
}

.btn-price {
	transition: all 0.75s;
}
</style>



</head>

<body>

	<div class="container">


		<div class="orange-orange-a row pf text-center f14 border-1 bdc-e6e6e6 bgc-f8f8f8 pt-5 pb-5 z99 w h45 line-height-35 pr" style="left: 0; top: 0;">
				<div class="col-xs-4 line-height-35 text-left pl-15 pr-0 pt-0">
					<a class="go-back f15 pa z99 pointer co8" style="left: 15px;">
						<i class="fa f20 fa-angle-left pr-3"></i>返回
					</a>
				</div>
				<div class="col-xs-4 pr-0 pl-0 text-center">账户充值</div>
			</div>




		<div class="pb-50 pt-50 row pl-15 pr-15">
			<div class="bgc-F5CCC5 mb-15 col-xs-12 row bg-price bdr-4">
				<div class="col-xs-8 pl-0 pr-0 h155 line-height-155 text-center">
					<span class="f35 co5 price">0</span> <span class="f25 co5 pl-5">元</span>
				</div>
				<div class="col-xs-4 pt-30 pl-0 pr-0 text-center">
					<div>
						<img src="${ctxStatic }/images/logo_white.png" class="w100" /> 
					</div>
					 <div class="co5 f16 pt-5">汽车驿站</div>
				</div>
			</div>

			<div class="col-xs-4 pl-0 pr-5 text-left">
				<a class="btn btn-block btn-lg co9 btn-price" data-price="500"
					data-color="#5A9BC3">500</a>
			</div>
			<div class="col-xs-4 pl-3 pr-3">
				<a class="btn btn-block btn-lg co9 btn-price" data-price="200"
					data-color="#5DC35A">200</a>
			</div>
			<div class="col-xs-4 pl-5 pr-0 text-right">
				<a class="btn btn-block btn-lg co9 btn-price" data-price="100"
					data-color="#EF8A55">100</a>
			</div>

			<div class="col-xs-12 pl-0 pr-0 pt-10 other-price-item">
				<div class="input-group">
					<span class="input-group-addon"> <input
						class="other-price-check" type="checkbox">
					</span> <input type="text" maxlength="6"
						class="form-control input-lg other-price"
						placeholder="其他金额(0-999)">
				</div>
			</div>

			<form method="post" action="${ctx }/weixin/f/autoinn/prePay/cash">
				<ul class="list-group col-xs-12 mt-15 mb-10 pr-0">
					<li class="list-group-item bdc-d0d0d0 pr">
						<div class="row pay-item">
							<div class="col-xs-3 pr-0 pl-0 text-center">
								<img class="h32" src="http://static.aoaoxc.com/img/weixin.png">
							</div>
							<div class="col-xs-6 line-height-32 f16">微信支付</div>
							<div class="col-xs-3 line-height-32 text-right pr-0 pt-5">
							 	<input type="checkbox" class="pay-type" name="pay_type" value="2" checked="checked">
							</div>
						</div>
					</li>
					<!-- <li class="list-group-item bdc-d0d0d0 pr">
						<div class="row pay-item">
							<div class="col-xs-3 pr-0 pl-0 text-center">
								<img class="h32" src="http://static.aoaoxc.com/img/zhifubao.png">
							</div>
							<div class="col-xs-6 line-height-32 f16">支付宝支付</div>
							<div class="col-xs-3 line-height-32 text-right pr-0 pt-5">
								<input type="checkbox" class="pay-type" name="pay_type"
									value="1">
							</div>
						</div>
					</li>-->
				</ul>

				<div class="col-xs-12 pl-0 pr-0 pt-5 pb-20">
					<input type="hidden" name="pay_function" value="prePay" />
					<input type="hidden" value="" name="total_fee" id="total_fee_id" />
					<button class="btn btn-orange btn-block btn-lg" type="submit">确认付款</button>
				</div>
			</form>
		</div>




	</div>

	<script type="text/javascript" src="${ctx }/static/js/wxsys/jquery.placeholder.js"></script>
	<script type="text/javascript" src="${ctx }/static/js/wxsys/site.js"></script>
	<script type="text/javascript" src="http://static.aoaoxc.com/js/bootstrap/bootstrap.min.js"></script>

	<script type="text/javascript">
		$(document).ready(
				function() {
					// 点击金额切换颜色
					$('.btn-price').bind( 'click',
							function() {
								var price = $(this).data('price'), color = $(this).data('color');

								$('.btn-price').css({
									'backgroundColor' : '#eeeeee',
									'borderColor' : '#dddddd',
									'color' : '#777777'
								});
								
								$(this).css({
									'backgroundColor' : color,
									'borderColor' : color,
									'color' : '#ffffff'
								});
								
								$('.bg-price').css('backgroundColor', color);
								$('.price').html(price);
								$('#total_fee_id').val(price);

								$('.other-price-check').attr('checked', false);
								$('.other-price').val('');
							});

					// 点击整行选择支付方式
					$('.pay-item').bind('click', function() {
						$('.pay-type').attr('checked', false);
						$(this).find('.pay-type').attr('checked', true);
					});

					// 手动输入价格
					$('.other-price').bind('input', function() {
						var price = $(this).val();
						if (/^(\d{1,3}\.\d{1,2}|\d{1,3})$/.test(price)) {
							price = parseFloat(price);

							if (price <= 0) {
								alert("请输入正确的金额");
								return;
							}

							$('.price').html(price);
							$('#total_fee_id').val(price);

							$('.other-price-check').attr('checked', true);
							$('.btn-price').css({
								'backgroundColor' : '#eeeeee',
								'borderColor' : '#dddddd',
								'color' : '#777777'
							});
							$('.bg-price').css('backgroundColor', "#2CC7CD");
						} else {
							// price = 0;
							alert("请输入正确的金额");
							// $.Global.Notice.InfoTopNotice("请输入正确的金额")
						}

					});

					// 手动点击其他价格的checkbox
					$('.other-price-check').bind('click', function() {
						if ($(this).attr('checked')) {
							$('.other-price').val(10);
							$('.price').html("10");
							$('#total_fee_id').val(10);
							$('.btn-price').css({
								'backgroundColor' : '#eeeeee',
								'borderColor' : '#dddddd',
								'color' : '#777777'
							});
							$('.bg-price').css('backgroundColor', "#2CC7CD");
						} else {
							$('.other-price').val('');
							$('.price').html("0");
							$('#total_fee_id').val(0);
						}
					});

					$('form').bind('submit', function() {
						var price = $('#total_fee_id').val();

						if (/^(\d{1,3}\.\d{1,2}|\d{1,3})$/.test(price)) {
							price = parseFloat(price);
							if (price <= 0) {
								alert("请输入正确的金额");
								return false;
							}
							return true;
						} else {
							return false;
						}
					});

					$('.btn-price').eq(2).click();
				});
	</script>
</body>
</html>
